<template>
  <a-card :bordered="false" size="small">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="名称">
              <a-input size="small" v-model="queryParam.name" placeholder="" allowClear />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="响应状态">
              <a-select
                size="small"
                ref="selectHttpStatus"
                :key="queryParam.httpStatus"
                showSearch
                v-model="queryParam.httpStatus"
                allowClear
                @change="() => $refs.table.refresh(true)"
              >
                <a-select-option v-for="status in httpStatusOptions" :key="status.value" :value="status.name">
                  {{ '[' + status.value + '] ' + status.reasonPhrase }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="24" :sm="24">
            <a-form-item label="请求方式">
              <a-radio-group
                size="small"
                :key="queryParam.httpMethod"
                v-model="queryParam.httpMethod"
                @change="() => $refs.table.refresh(true)"
              >
                <a-radio-button value="">All</a-radio-button>
                <a-radio-button v-for="method in httpMethodsRadios" :key="method" :value="method">
                  {{ method }}
                </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="48">
          <a-col :md="24" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" size="small" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button
                style="margin-left: 8px"
                size="small"
                @click="() => ((this.queryParam = { httpMethod: '' }), $refs.table.refresh(true))"
              >
                重置
              </a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator">
      <a-button type="primary" size="small" icon="plus" @click="openCreateReponse({})">新建</a-button>
    </div>

    <s-table ref="table" size="small" rowKey="id" :columns="columns" :data="loadData" showPagination="auto">
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleDelete(record)">删除</a>
        </template>
      </span>

      <span slot="response-status" slot-scope="text, record">
        <a-tooltip :get-popup-container="getPopupContainer">
          <template v-if="!record.enable" #title>相同的请求方式最多同事存在一个启用的响应体</template>
          <a-switch
            size="small"
            :checked="record.enable == 1"
            checked-children="启用"
            un-checked-children="禁用"
            @change="handleChangeResponseStatus(record)"
          />
        </a-tooltip>
      </span>
      <span slot="response-slot" slot-scope="text, record">
        <template>
          <a @click="openCreateReponse(record)">{{ record.name }}</a>
        </template>
      </span>
    </s-table>

    <create-response
      :visible="createResponseVisible"
      :form="currentRecord"
      :isEdit="currentRecord.isEdit"
      :urlId="urlId"
      @handle-ok="handleCreateOk"
      @handle-cancel="handleCreateCancel"
    />
  </a-card>
</template>

<script>
import { failmsg } from '@/api/api'
import { deleteById, getHttpHeaders, getHttpMethods, getHttpStatus, getList, update } from '@/api/mock-url-response'
import { STable } from '@/components'
import CreateResponse from './CreateResponse'

export default {
  name: 'ResponseList',
  props: {
    urlId: {
      type: String,
      default: '',
    },
  },
  components: {
    STable,
    CreateResponse,
  },
  data() {
    this.columns = [
      {
        title: '#',
        width: '60px',
        scopedSlots: { customRender: 'serial' },
      },
      {
        title: '名称',
        dataIndex: 'name',
        scopedSlots: { customRender: 'response-slot' },
      },
      {
        title: '请求方式',
        dataIndex: 'httpMethod',
      },
      {
        title: 'Http状态码',
        dataIndex: 'httpStatus',
        customRender: (text, record) => {
          return '[' + record.httpStatus + '] ' + record.httpStatusReasonPhrase
        },
      },
      {
        title: '状态',
        dataIndex: 'enable',
        scopedSlots: { customRender: 'response-status' },
      },
      {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
      },
    ]
    return {
      httpMethodsRadios: [],
      httpStatusOptions: [],
      httpHeaders: [],
      // 查询参数
      queryParam: {
        httpMethod: '',
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        this.queryParam.urlId = this.urlId
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getList(requestParameters)
          .then((res) => {
            return res
          })
          .catch((error) => {
            failmsg(error)
          })
      },
      currentRecord: {},
      createResponseVisible: false,
      viewResponseVisible: false,
      activeNotices: false,
    }
  },
  computed: {},
  mounted() {
    getHttpMethods().then((res) => (this.httpMethodsRadios = res))
    getHttpHeaders().then((res) => (this.httpHeaders = res))
    getHttpStatus().then((res) => (this.httpStatusOptions = res))
  },
  filters: {},
  methods: {
    handleChangeResponseStatus(checked) {
      const requestParameters = {
        id: checked.id,
        urlId: this.urlId,
        enable: !checked.enable ? 1 : 0,
      }
      update(requestParameters)
        .then((res) => {
          this.$refs.table.refresh(true)
          return res
        })
        .catch((error) => {
          failmsg(error)
        })
    },
    handleChangeHttpMethod(event) {
      const value = event.target.value
      this.queryParam.httpMethod = value
    },
    handleChangeHttpStatus(value) {
      this.queryParam.httpStatus = value
    },
    handleCreateOk() {
      this.createResponseVisible = false
      this.currentRecord = {}
      this.$refs.table.refresh(true)
    },
    handleCreateCancel() {
      this.createResponseVisible = false
      this.currentRecord = {}
    },

    openCreateReponse(record) {
      this.currentRecord = {
        ...record,
        ...{ urlId: this.urlId, isEdit: null != record.id, enable: record.enable ? String(record.enable) : '0' },
      }
      console.log('currentRecord', this.currentRecord)
      this.createResponseVisible = true
    },
    handleDelete(record) {
      deleteById(record)
        .then((res) => {
          this.$refs.table.refresh(true)
        })
        .catch((error) => {
          failmsg(error)
        })
    },
    getPopupContainer(triggerElement) {
      return triggerElement.parentElement
    },
  },
}
</script>
